<template>
  <AdaptiveView>
    <div class="screen-container">
      <div class="screen-content" ref="screenRef">
        <div v-show="loading" class="mask flex-c">
          <dv-loading>
            <span class="loading-title">加载中...</span>
          </dv-loading>
        </div>
        <div v-if="!loading" class="h-full">
          <JTCharge04RL
            :mesProducingMonthBI="mesProducingMonthBI"
            :pieData="pieData"
            :pieTableData="pieTableData"
            :refreshRate="30000"
            @get-info="getProducingMonthBI"
          />
          <!-- <Mes01
            v-if="defaultBoardConfig.name?.includes('A')"
            :planBIDTOS="planBIDTOS?.mesProducingPlanBIDTOS"
            :refreshRate="defaultBoardConfig.refreshRate"
            @get-info="getProducingPlan"
          />

          <Mes02
            v-if="defaultBoardConfig.name?.includes('B')"
            :andoBIDTOS="andoBIDTOS"
            :refreshRate="defaultBoardConfig.refreshRate"
            @get-info="getProducingPlan"
          />

          <Mes03
            v-if="defaultBoardConfig.name?.includes('C')"
            :planBIDTOS="mesProducingWeekBI"
            :refreshRate="defaultBoardConfig.refreshRate"
            @get-info="getProducingWeekBI"
          />

          <Mes04
            v-if="defaultBoardConfig.name?.includes('D')"
            :mesProducingMonthBI="mesProducingMonthBI"
            :refreshRate="defaultBoardConfig.refreshRate"
            @get-info="getProducingMonthBI"
          /> -->

          <!-- <div v-else></div> -->
        </div>
      </div>
    </div>
  </AdaptiveView>
</template>

<script setup lang="ts">
import request from "@/utils/request";
import { useRoute } from "vue-router";
import dayjs from "dayjs";
import RL01 from "@/views/dataScreen/RL01/index.vue";

import Mes02 from "@/views/dataScreen/Mes02/index.vue";
import Mes03 from "@/views/dataScreen/Mes03/index.vue";
import Mes04 from "@/views/dataScreen/Mes04/index.vue";

defineOptions({
  name: "DATASCREENJTMOLDMAINTENANCESCREEN",
  inheritAttrs: false,
});

const loading = ref(true);
const route = useRoute();

onMounted(() => {
  // if (!route.query.screenCode) {
  //   getBoardConfig();
  // } else {
  //   ElMessage.error("请输入屏幕编号进行看板查询");
  //   loading.value = false;
  // }
  setTimeout(() => {
    loading.value = false;
    getProducingMonthBI();
  }, 1000);

  setInterval(() => {
    getProducingMonthBI();
    // console.log(index, boardConfig.value.length);
  }, 10000);
});

// 第一个大屏数据
const planBIDTOS = ref();
const getProducingPlan = async () => {
  planBIDTOS.value = {};
  const { data }: any = await request({
    url: `/mes/ProductionBI/getProducingPlanBI`,
    method: "post",
    data: {
      screenCode: route.query.screenCode || "D",
    },
  });

  planBIDTOS.value = data;
};

// 第二个大屏数据
const andoBIDTOS = ref();
const getAndoBIDTOS = async () => {
  andoBIDTOS.value = {};
  const { data }: any = await request({
    url: `/mes/ProductionBI/getProducingPlanBIAND`,
    method: "post",
    data: {
      screenCode: route.query.screenCode || "D",
    },
  });

  andoBIDTOS.value = data;
  // andoBIDTOS.value = {
  //   mesProducingWeekBIDTOS: [
  //     {
  //       deviceStatusName: "停机维修",
  //       deviceName: "DK755-35",
  //       andCall: "安东呼叫名称",
  //       stopTime: "2024-06-23 12:30:10",
  //       callTime: "10",
  //       status: "呼叫中",
  //     },
  //   ],
  //   mesAndStopBIDTOS: [
  //     {
  //       deviceStatusName: "停机维修",
  //       deviceName: "DK755-35",
  //       andCall: "安东呼叫名称",
  //       stopTime: "2024-06-23 12:30:10",
  //       callTime: "10",
  //       status: "呼叫中",
  //     },
  //   ],
  // };
};

// 第四个大屏数据
const pieTableData = ref([]);
const pieData = ref([]);

const mesProducingMonthBI = ref([]);
const getProducingMonthBI = async () => {
  const { data }: any = await request({
    url: `/mes/biscreendisplayfeeding/getDisplayOne/HJJL`,
    method: "get",
  }).catch(() => {
    mesProducingMonthBI.value = [];
  });

  mesProducingMonthBI.value = data || [];
};

// 第三个大屏数据
const mesProducingWeekBI = ref([]);
const getProducingWeekBI = async () => {
  const { data }: any = await request({
    url: `/mes/ProductionBI/getProducingWeekBI`,
    method: "post",
    data: {
      screenCode: route.query.screenCode || "D",
    },
  });

  mesProducingWeekBI.value = data || {};
};

// 获取当前大屏配置
const defaultBoardConfig = reactive({
  name: "",
  id: "",
  refreshRate: 30,
  switchingTime: 60,
});
const boardConfig: any = ref([]);
const getBoardConfig = async () => {
  const { data }: any = await request({
    url: `/mes/messcreen/getSpectacularsList`,
    method: "post",
    data: {
      screenCode: route.query.screenCode || "D",
    },
  }).catch(() => {
    loading.value = false;
  });
  boardConfig.value = data.details || [];
  handleScreenData(0);
  loading.value = false;
};

let timer: any = ref(null);

// 大屏切换处理方法
function handleScreenData(index: number) {
  clearInterval(timer.value);
  timer.value = null;

  timer.value = setInterval(() => {
    index = index + 1;
    if (index === boardConfig.value.length) {
      index = 0;
    }
    // console.log(index, boardConfig.value.length);
    handleScreenData(index);
  }, defaultBoardConfig.switchingTime * 1000);
}

onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.screen-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .mask {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background-image: url("@/assets/images/screen/pageBg.png");
  }

  .screen-content {
    width: 1678px;
    height: 946px;
    box-sizing: border-box;
    // padding: 12px;
    background-image: url("@/assets/images/screen/pageBg.png");
    transition: all 0.2s ease-in-out;

    :deep(.el-card) {
      background-color: transparent;
      border: none;
      .el-card__header {
        background: rgba(212, 219, 249, 0.1);
        border-bottom: none;
        color: white;
        .el-card-title {
          color: white;
        }
      }
    }

    .loading-title {
      font-size: 16px;
      color: #fff;
      margin-top: 10px;
    }
  }
}
</style>
